<template>
  <div>
    <h2 :class="{ 'text-lg': large }" slot-attrs>
      <slot name="heading" />
    </h2>
    <a class="btn" slot-attrs>
      <slot name="button" />
    </a>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const large = ref(false);

setInterval(() => large.value = !large.value, 1000)
</script>
<style scoped>
.text-lg {
  font-size: 50px !important;
}

h2 {
  font-weight: normal;
}
</style>